'use strict';

import BaseThreeApp from '../BaseThreeApp';
import * as THREE from 'three';

class _00Test extends BaseThreeApp {
  public scene: THREE.Scene;
  public camera: THREE.Camera;
  public renderer: THREE.WebGLRenderer;

  start() {
    //创建场景.
    this.scene = new THREE.Scene();
    //相机
    this.camera = new THREE.PerspectiveCamera(
      75,
      this.element.clientWidth / this.element.clientHeight,
      0.1,
      1000
    );
    //渲染器
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.element,
    });
    //设置画布大小
    // this.renderer.setSize(this.element.clientWidth, this.element.clientHeight);
    this.renderer.setDrawingBufferSize(
      this.element.clientWidth,
      this.element.clientHeight,
      1
    );

    //第二步,创建几何体.
    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    let cube = new THREE.Mesh(geometry, material);
    //加入到场景
    this.scene.add(cube);

    //设置相机位置
    this.camera.position.z = 5;

    //渲染循环
    const animate = () => {
      requestAnimationFrame(animate);
      this.renderer.render(this.scene, this.camera);
    };
    animate();
  }

  onresize(e: UIEvent) {
    super.onresize(e);
    console.log('onresive');
    if (this.renderer) {
      this.renderer.setDrawingBufferSize(
        this.element.clientWidth,
        this.element.clientHeight,
        1
      );
      if (this.camera instanceof THREE.PerspectiveCamera) {
        this.camera.aspect =
          this.element.clientWidth / this.element.clientHeight;
        this.camera.updateProjectionMatrix();
      }
    }
  }
}

export default new _00Test();
